<template>
    <div class="limiter">
        <div class="container-login100" style="background-image: url('/assets/images/img-01.jpg');">
            <div class="wrap-login100 p-t-190 p-b-30">
                <van-form @submit="onSubmit" class="login100-form validate-form">
                    <div class="login100-form-avatar">
                        <img src="/assets/images/avatar-01.jpg" alt="AVATAR">
                    </div>

                    <span class="login100-form-title p-t-20 p-b-45">Hello</span>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入手机号">
                        <input class="input100" type="text" v-model="mobile" placeholder="手机号" autocomplete="off">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-user"></i>
                        </span>
                    </div>

                    <div class="wrap-input100 validate-input m-b-10" data-validate="请输入密码">
                        <input class="input100" type="password" v-model="password" placeholder="密码">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
                            <i class="fa fa-lock"></i>
                        </span>
                    </div>
                    <div class="text-right w-full">
                        <i class="txt1" @click="showPopup">忘记密码</i>
                    </div>
                    <van-popup v-model:show="show" :style="{ backgroundColor: '#212121', borderRadius: '15px' }">
                        <van-form @submit="wangjiSubmit" class="form">
                            <div class="info">
                                <span class="title">重置密码</span>
                                <p class="subscribe-form">
                                    <input v-model="email" type="email" placeholder="请输入邮箱" class="subscribe-input">
                                    <button class="subscribe-btn" @click="getcode" type="button">获取</button>
                                </p>
                            </div>
                            <div class="inputs">
                                <input v-model="yzmcode[0]" placeholder="" maxlength="1" @input="focusNext(0)"
                                    ref="input0">
                                <input v-model="yzmcode[1]" placeholder="" maxlength="1" @input="focusNext(1)"
                                    ref="input1" @keydown.backspace="focusPrev(1)">
                                <input v-model="yzmcode[2]" placeholder="" maxlength="1" @input="focusNext(2)"
                                    ref="input2" @keydown.backspace="focusPrev(2)">
                                <input v-model="yzmcode[3]" placeholder="" maxlength="1" ref="input3"
                                    @keydown.backspace="focusPrev(3)">
                            </div>
                            <button class="validate">提交</button>
                            <p class="resend">请获取邮箱验证码！<br>然后重置密码</p>
                        </van-form>
                    </van-popup>
                    
                    <van-popup v-model:show="chonzhi" :style="{ backgroundColor: '#212121', borderRadius: '15px' }">
                        <van-form @submit="chonpassword" class="form">
                            <div class="info">
                                <span class="title">重置密码</span>
                                <p class="subscribe-form">
                                    <input v-model="chonpass" type="password" placeholder="请输入密码" class="subscribe-input">
                                </p>
                                <p class="subscribe-form">
                                    <input v-model="chonpasss" type="password" placeholder="请输入确认密码" class="subscribe-input">
                                </p>
                            </div>
                            <button class="validate">提交</button>
                            <p class="resend">请获取邮箱验证码！<br>然后重置密码</p>
                        </van-form>
                    </van-popup>

                    <div class="container-login100-form-btn p-t-10">
                        <button class="login100-form-btn">登 录</button>
                    </div>

                    <div class="text-center p-t-28 w-full">
                        <router-link class="txt1" to="/business/base/register">
                            立即注册
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>

                    <div class="text-center p-t-28 w-full">
                        <router-link class="txt1" to="/">
                            返回首页
                            <i class="fa fa-long-arrow-right"></i>
                        </router-link>
                    </div>
                </van-form>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();
const mobile = ref('13600000000');
const password = ref('123');
const email = ref('');
const yzmcode = ref(['', '', '', '']);
const chonzhi = ref(false);
const chonpass = ref('');
const chonpasss = ref('');
const chonpassword = async()=>{
    if(chonpass.value!=chonpasss.value){
        proxy.$showNotify({
            type: 'success',
            message: '密码不一致',
            duration: 2000,
        })
    }
    let data = {
        chonpass:chonpass.value,
        chonpasss:chonpasss.value
    }
    let result = await proxy.$Api.chonPassword(data);
    if (result && result.code === 1) {
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
            onClose: () => {
                show.value = false;//成功后关闭窗口。
                chonzhi.value = false;//开启窗口。
            }
        })
    }else{
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000
        })
    }
}
const wangjiSubmit = async () => {
    let data = {
        email: email.value,
        yzmdata: yzmcode.value.join('')
    }
    let result = await proxy.$Api.WangjiSubmit(data);
    if (result && result.code === 1) {
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
            onClose: () => {
                show.value = false;//成功后关闭窗口。
                chonzhi.value = true;//开启窗口。
            }
        })
    }else{
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000
        })
    }
}
//获取验证码
const getcode = async () => {
    if (!email.value.trim()) {
        proxy.$showNotify({
            type: 'warning',
            message: '邮箱不为空',
            duration: 2000,
        });

        return;
    }
    let data = {
        email: email.value
    }
    let result = await proxy.$Api.getcode(data);
    if (result && result.code === 1) {
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
        })
    }else{
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
        })
    }
}

// 焦点转移到下一个输入框
const focusNext = (index) => {
    if (index < yzmcode.value.length - 1 && yzmcode.value[index].length === 1) {
        // 选择下一个输入框并聚焦
        const nextInputRef = `input${index + 1}`;
        proxy.$refs[nextInputRef].focus();
    }
}

// 焦点转移到前一个输入框
const focusPrev = (index) => {
    if (index > 0 && yzmcode.value[index].length === 0) {
        // 选择前一个输入框并聚焦
        const prevInputRef = `input${index - 1}`;
        proxy.$refs[prevInputRef].focus();
        // 清除前一个输入框的值
        yzmcode.value[index - 1] = '';
    }
}

const onSubmit = async () => {
    if (!mobile.value.trim()) {
        proxy.$showNotify({
            type: 'warning',
            message: '手机号不能为空',
            duration: 2000,
        });

        return;
    }

    let mobileReg = /^1[3456789]\d{9}$/;

    if (!mobileReg.test(mobile.value)) {
        proxy.$showNotify({
            type: 'warning',
            message: '手机号格式错误',
            duration: 2000,
        });

        return;
    }

    if (!password.value.trim()) {
        proxy.$showNotify({
            type: 'warning',
            message: '密码不能为空',
            duration: 2000,
        });

        return;
    }

    let data = {
        mobile: mobile.value,
        password: password.value
    }

    let result = await proxy.$Api.login(data);

    if (result && result.code === 1) {
        proxy.$showNotify({
            type: 'success',
            message: result.msg,
            duration: 2000,
            onClose: () => {
                proxy.$cookies.set('business', result.data);

                proxy.$router.push('/business/base/Index');
            }
        })
    } else {
        proxy.$showNotify({
            type: 'warning',
            message: result.msg,
            duration: 2000,
        });

        return;
    }
}
const show = ref(false);
const showPopup = () => {
    show.value = true;
};
</script>

<style>
@import url('/assets/fonts/font-awesome-4.7.0/css/font-awesome.min.css');
@import url('/assets/css/util.css');
@import url('/assets/css/main.css');
@import url('/assets/css/login.css');
</style>